<template>
  <div>
    <Header />
    <div class="container">
      <div class="order-container">
        <statusVue :order="order" />
        <div class="order-note">
          <span class="order-id">开心影院订单号:{{order.orderNo}}</span>
          <span class="contact">（有订单问题可拨打猫眼客服电话<i>1010-5335</i>，工作时间: 9:00-24:00）</span>
        </div>
        <Pay :order="order" v-if="isPay" />
        <List :order="order" v-else :selectedSeat="order.seats"/>
        <bottom :order="order" v-if="!isPay"/>
    </div>
      </div>
    </div>
  </div>
</template>

<script>
import statusVue from './status.vue'
import Header from '@/components/Header'
import List from '@/components/List'
import bottom from './bottom.vue'
import Pay from '@/components/Pay'
import { mapState } from 'vuex'
export default {
  name: 'TtmsDetail',
  components: {
    statusVue,
    Header,
    List,
    bottom,
    Pay
  },

  data () {
    return {
      isPay: false
    }
  },
  computed: {
    ...mapState('order', ['order']),
    orderId () {
      return this.$route.params.id
    }
  },

  mounted () {
    this.$store.dispatch('order/getOrderById', this.orderId)
    this.$bus.$on('pay', (flag) => {
      this.isPay = flag
    })
  },

  methods: {}
}
</script>

<style lang="scss" scoped>
.container {
  width: 1200px;
  margin: 0 auto;
}
.order-container {
  margin-top: 40px;
}
.order-note {
  margin-bottom: 8px;
}
.order-id {
  font-size: 16px;
  color: #999;
}
.order-note .contact {
  font-size: 12px;
  color: #666;
  float: right;
}
.order-note .contact i {
  color: #f03d37;
  font-style: normal;
}
</style>
